<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col section_1">
				<view class="flex-col section_2">
					<view class="flex-col">
						<text class="text_1">账户余额(元)</text>
						<text class="text_2">{{ balance.toFixed(2) }}</text>
					</view>
					<view class="justify-between group_2">
						<view class="flex-col" @click="toPath('/bundle/pages/recharge_record/recharge_record')">
							<text>我的充值卡</text>
						</view>
						<view class="section_3"> </view>
						<view class="flex-col" @click="toPath('/bundle/pages/consume_record/consume_record')">
							<text>消费明细</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col section_4">
				<view class="flex-col">
					<view class="flex-row group_4">
						<view class="section_5"> </view>
						<text class="text_6">现金充值卡</text>
					</view>
					<view class="flex-col group_7">
						<view class="flex-row section_11">
							<text class="text_22">
								<input type="text" placeholder="请输入充值卡号" v-model="money" /></text>
						</view>
						<view class="flex-col items-center button" @click="comfirm">
							<text>立即兑换</text>
						</view>
						
						<view class="flex-between items-center">
							<view class="flex1 button2" style="margin-right: 32px;">
								<text>获取充值卡</text>
							</view>
							<view class="flex1 button2" @click="toTab('/pages/technician/newindex')">
								<text>去消费</text>
							</view>
						</view>
						
						
						<text class="text_23">充值说明
						<br />1：本次充值<span style="text-decoration: underline;">仅限于在本平台消费</span>。
						<br />2：充值和赠送的金额均<span style="text-decoration: underline;">不可以提现，转移，转赠，退款</span>。						<br />3：使用范围：本平台所有项目购买，以及交通费用支付。						<br />4：若遇到充值未到账，请联系平台客服处理。
						</text>
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance: 0,
				money: '',
				id: null,
			};
		},
		onLoad() {
			this.init();
		},
		methods: {
			init() {
				// 获取账户余额
				this.$http.post('api/recharge/index').then(res => {
					this.balance = Number(res.balance)
				});
			},
			comfirm() {
				
			},
			toTab(url){
				uni.switchTab({
					url
				})
			},
			toPath(url) {
				uni.navigateTo({
					url,
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #FFFFFF;
		width: 100%;
		height: 100vh;
		overflow-y: auto;

		.popup {
			height: 600rpx;

			.section_8 {
				padding-bottom: 92rpx;
				background-color: rgb(248, 248, 248);
				border-radius: 40rpx 40rpx 0px 0px;

				.button {
					margin: 80rpx 32rpx 0;
					padding: 22rpx 0;
					color: rgb(255, 255, 255);
					font-size: 32rpx;
					font-weight: 500;
					line-height: 44rpx;
					white-space: nowrap;
					background-color: rgb(24, 181, 103);
					border-radius: 44rpx;
				}
				

				
				.section_9 {
					padding: 20rpx 32rpx 22rpx 34rpx;
					background-color: rgb(255, 255, 255);
					border-radius: 40rpx 40rpx 0px 0px;

					.image_1 {
						margin: 8rpx 0 6rpx;
						width: 44rpx;
						height: 44rpx;
					}

					.text_23 {
						margin-top: 18rpx;
						color: rgb(80, 80, 80);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
					}

					.group_10 {
						margin-left: 16rpx;
						white-space: nowrap;
						height: 58rpx;

						.text_24 {
							color: rgb(243, 151, 53);
							font-size: 28rpx;
							line-height: 34rpx;
						}

						.text_25 {
							color: rgb(243, 151, 53);
							font-size: 48rpx;
							line-height: 58rpx;
						}
					}
				}

				.group_11 {
					padding-bottom: 190rpx;
					position: relative;

					.section_10 {
						background-image: linear-gradient(180deg,
								rgb(255, 255, 255) 0%,
								rgb(255, 255, 255) 0%,
								rgb(248, 248, 248) 100%,
								rgb(248, 248, 248) 100%);
						height: 48rpx;
					}

					.list {
						position: absolute;
						left: 32rpx;
						right: 32rpx;
						bottom: 0;

						.list-item {
							padding: 26rpx 24rpx;
							color: rgb(0, 0, 0);
							font-size: 28rpx;
							font-weight: 500;
							line-height: 40rpx;
							white-space: nowrap;
							background-color: rgb(255, 255, 255);
							border-radius: 24rpx;

							&:last-of-type {
								margin-top: 24rpx;
							}

							.image_4 {
								width: 44rpx;
								height: 44rpx;
							}

							.image_2 {
								width: 40rpx;
								height: 40rpx;
							}

							.text_26 {
								margin-left: 14rpx;
							}
						}
					}
				}
			}
		}

		.group {
			flex: 1 1 auto;
			overflow-y: auto;

			.section_1 {
				padding: 30rpx 0 40rpx;
				background-color: rgba(24, 181, 103, 0.2);

				.section_2 {
					margin-left: 32rpx;
					margin-right: 30rpx;
					padding: 40rpx 40rpx 28rpx;
					background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844669824572110.png');
					background-position: 0px 0px;
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.group_2 {
						margin-top: 92rpx;
						color: rgb(255, 255, 255);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;

						.section_3 {
							align-self: center;
							background-color: rgb(255, 255, 255);
							width: 2rpx;
							height: 18rpx;
						}
					}

					.text_1 {
						color: rgb(255, 255, 255);
						font-size: 32rpx;
						line-height: 44rpx;
						white-space: nowrap;
					}

					.text_2 {
						font-family: Price;
						margin-top: 8rpx;
						color: rgb(255, 255, 255);
						font-size: 60rpx;
						line-height: 72rpx;
						white-space: nowrap;
					}
				}
			}

			.section_4 {
				margin-top: -40rpx;
				padding: 40rpx 31rpx 100rpx 32rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 40rpx 40rpx 0px 0px;
				position: relative;

				.button {
					margin-top: 20px;
					padding: 26rpx 0;
					color: rgb(255, 255, 255);
					font-size: 32rpx;
					font-weight: 500;
					line-height: 44rpx;
					white-space: nowrap;
					background-color: rgb(24, 181, 103);
					border-radius: 48rpx;
				}
				.button2 {
					margin-top: 36px;
					padding: 16rpx 0;
					color: rgb(255, 255, 255);
					font-size: 28rpx;
					font-weight: 500;
					white-space: nowrap;
					background-color: #177145;
					border-radius: 44rpx;
					text-align: center;
					    background-image: linear-gradient(116.3deg, #18b567 0%, #18b567 -13.77%, #177145 111.69%, #177145 100%);
				}
				
				.group_4 {
					color: rgb(0, 0, 0);
					font-size: 32rpx;
					font-weight: 500;
					line-height: 44rpx;
					white-space: nowrap;

					.section_5 {
						margin: 6rpx 0;
						background-color: rgb(24, 181, 103);
						border-radius: 4rpx;
						width: 8rpx;
						height: 32rpx;
					}

					.text_6 {
						margin-left: 16rpx;
					}
				}

				.grid {
					margin-top: 32rpx;
					
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					grid-row-gap: 26rpx;
					grid-column-gap: 26rpx;

					.grid-item {
						padding: 18rpx 0 20rpx;
						// 
						background-color: rgba(24, 181, 103, 0.2);
						border-radius: 12rpx;

						&.active {
							background-color: rgb(24, 181, 103);
						}

						.group_5 {
							white-space: nowrap;

							.text_7 {
								color: rgb(255, 255, 255);
								font-size: 28rpx;
								line-height: 34rpx;
							}

							.text_8 {
								font-family: Price;
								color: rgb(255, 255, 255);
								font-size: 40rpx;
								line-height: 58rpx;
							}
						}
						.group_6 {
							
						
							.text_7 {
								color: rgb(255, 255, 255);
								font-size: 20rpx;
								line-height: 30rpx;
							}
						
							.text_8 {
								font-family: Price;
								color: rgb(255, 255, 255);
								font-size: 30rpx;
								
							}
						}
					}

					.grid-item_1 {
						padding: 18rpx 0 20rpx;
						background-color: rgba(24, 181, 103, 0.08);
						border-radius: 12rpx;

						.group_6 {
							white-space: nowrap;

							.text_9 {
								color: rgba(24, 181, 103, 0.6);
								font-size: 28rpx;
								line-height: 34rpx;
							}

							.text_11 {
								color: rgba(24, 181, 103, 0.6);
								font-size: 48rpx;
								line-height: 58rpx;
							}
						}
					}
				}

				.group_7 {
					margin-top: 24rpx;

					.section_11 {
						padding: 32rpx 24rpx 30rpx;
						background-color: rgb(248, 248, 248);
						border-radius: 12rpx;

						.text_21 {
							color: rgb(24, 181, 103);
							font-size: 48rpx;
							line-height: 58rpx;
							white-space: nowrap;
						}

						.text_22 {
							margin: 6rpx 0 8rpx 16rpx;
							color: rgb(153, 153, 153);
							font-size: 32rpx;
							line-height: 44rpx;
							white-space: nowrap;
						}
					}

					.text_23 {
						margin-top: 40rpx;
						color: rgb(102, 102, 102);
						font-size: 24rpx;
						line-height: 40rpx;
						text-align: left;
						width: 634rpx;
					}
				}
			}
		}
	}
</style>
